<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品列表 - WMS库存管理系统</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">
<div class="layui-body" style="padding:15px;top: 0px;">
    <style>
        .red{color: red;}
    </style>

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="sp-wrapper">
        <h2 class="sp-title"><span>商品管理</span></h2>
        <div class="sp-tool">

            <form action="/goods/goods_list_count" method="get">
                <span class="fl">
                  <!--  <span  id="categoryDIV">
                        <input type="text" id="sp-sort"  placeholder="请选择分类" autocomplete="off" readonly>
                        <input type="hidden" name="categoryId" id="categoryId" value="0"/>
                    </span>-->
                    <div class="layui-inline">
                        <div class="layui-input-inline">

                                <select name="attr4" id="nianfen" style="width: 120px">
                                    <option value="" selected disabled>年份</option>
                                    <option value="2022">2022</option>
                                    <option value="2021">2021</option>
                                    <option value="2020">2020</option>
                                    <option value="2019">2019</option>
                                </select>

                                <div class="layui-input-inline">
                                       <select name="categoryId" id="fenlei">
                                        <option value=""  disabled>分类</option>
                                        <option value="1">医疗器械</option>
                                        <option value="4">男装</option>
                                        <option value="5" selected>女装</option>
                                        <option value="8">百货</option>
                                    </select>
                                </div>

                                <div class="layui-input-inline">
                                       <select name="attr1" id="jijie" >
                                        <option value="" selected disabled>季节</option>
                                        <option value="不分季节">不分季节</option>
                                        <option value="春秋季">春秋季</option>
                                        <option value="夏季">夏季</option>
                                        <option value="冬季">冬季</option>
                                    </select>
                                </div>

                                </div>

<!--                    <div class="layui-inline">-->
<!--                            <div class="layui-input-inline">-->
<!--                                <select id="categoryId1" name="categoryId1">-->
<!--                                    <option value="">全部商品分类</option>-->
<!--                                    <option value="1">医疗器械</option>-->
<!--                                    <option value="4">男装</option>-->
<!--                                    <option value="5">女装</option>-->
<!--                                    <option value="8">百货</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->
                    <input type="submit" class="button" value="查询"></span>
            </form>

        </div>
<!--        <div class="layui-form-item">-->

<!--            <div class="layui-inline">-->
<!--                <form method="post" enctype="multipart/form-data" id="execl_form">-->
<!--                    <input type="file" name="excel" id="excel" placeholder="excel" class="layui-input">-->
<!--                </form>-->
<!--            </div>-->

<!--            <div class="layui-inline">-->
<!--                <button type="button" id="excel_upload_btn" class="layui-btn">批量导入商品</button>-->
<!--                <a href="/importTemplates/goods_import_template.xlsx" target="_blank">下载商品导入模版</a>-->
<!--            </div>-->
<!--        </div>-->
        <div class="sp-table">
            <table>
                <thead>
                <tr>
                    <!--                    <th><input type="checkbox" /></th>-->
                    <th>分类</th>
                    <th>年份</th>
                    <th>季节</th>
                    <th>品类</th>
                    <th>库存</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>女装</td>
                    <td th:text="${obj.getAttr4()}">2019-4-11</td>
                    <td th:text="${obj.getAttr1()}">2019-4-11</td>
                    <td th:text="${obj.getAttr2()}">2019-4-11</td>
                    <td th:text="${obj.getQty()}">2019-4-11</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>


    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $sort = null;
            var $tree = null;
            var $status = false;
            var $data = null;
            var $cateId = 0;

            function create(data) {
                if (!data || data.length < 1) return;
                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    if (data[i].child && data[i].child.length > 0) {
                        tpl += '<li><h3><u>+</u><b data-id=' + data[i].id + '>' + data[i].name + '</b></h3><ul>' + create(data[i].child) + '</ul></li>';
                    } else {
                        tpl += '<li><h3><b data-id=' + data[i].id + '>' + data[i].name + '</b></h3></li>';
                    }
                }
                return tpl;
            }


            //商品分类初始化
            function init() {
                $tree = $('<ul class="sp-tree"></ul>').appendTo($('#categoryDIV'));

                $(document).click(function (e) {
                    if ($status) {
                        $tree.hide();
                        $status = false;
                    }
                });
                $tree.delegate('u', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _h = _this.parent('h3');
                    var _box = _h.next('ul');
                    if (_box.css('display') === 'none') {
                        _box.show();
                        _this.html('-');
                    } else {
                        _box.hide();
                        _this.html('+');
                    }
                });
                $tree.delegate('b', 'click', function (e) {
                    e.stopPropagation();
                    $sort.val($(this).text());
                    $("#categoryId").val($(this).attr('data-id'));
                    $tree.hide();
                    $status = false;
                    $cateId = $(this).attr('data-id');
                    console.log($(this).attr('data-id') + " + " + $cateId);
                });
                $tree.click(function (e) {
                    e.stopPropagation();
                });
            }

            function render() {
                $tree.html(create($data));
                $sort = $('#sp-sort');
                $sort.click(function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left - 280;
                    var y = pos.top + _this.outerHeight() - 60;
                    $tree.css({
                        left: x,
                        top: y
                    }).show();
                    $status = true;
                });
            }

            // ajax 获得分类数据 完成后执行 init()
            $.ajax({
                url: '/ajax_goods/json_category',
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    // $data = res.msg;
                    // $data.replace(/&quot;/g,'\"');
                    $data = eval('(' + res.msg + ')');
                    console.log($data);

                    init();
                    render();
                }
            });
        })
    </script>
    <script type="text/javascript">


        $(function () {

            $("#export").click(function () {
                var urlLink = window.location.href;
                var exportLink;
                if ($('#str').val()==""){
                    exportLink = urlLink .split("/goods/list")[0];
                } else {
                    exportLink = urlLink .split("/goods/list?str=")[0];
                }

                exportLink +="/ajax_goods/export?str="+$('#str').val();
                window.open(exportLink);
            });

            $(".pimg").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });

            function imgShow(outerdiv, innerdiv, bigimg, _this){
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
            // 删除
            // $('.delete').click(function () {
            //     // var pid = $(this).attr('data-pid');
            //     var id = $(this).attr('data-id');
            //     Tips.confirm({
            //         title: '删除商品',
            //         content: '删除的商品规格将不能恢复，请确认是否删除？',
            //         define: function () {
            //             // ajax处理
            //             $.ajax({
            //                 url: '/ajax_goods/delete_goods',
            //                 type: "POST",
            //                 dataType: "JSON",
            //                 contentType: 'application/json',
            //                 data: id,
            //                 success: function (res) {
            //                     if(res.code==0){
            //                         Tips.alert(res.msg, function () {
            //                             location.reload(true);
            //                         });
            //                     }else{
            //                         Tips.alert(res.msg);
            //                     }
            //
            //                 }
            //             });
            //             // .. pid id
            //
            //         }
            //     });
            // });

            //AJAX 批量上传商品
            // $("#excel_upload_btn").click(function () {
            //     var excel = $("#excel").val();
            //     if (excel == '') {
            //         alert("请选择文件");
            //         return false;
            //     } else if (excel.lastIndexOf(".xls") < 0) {//可判断以.xls和.xlsx结尾的excel
            //         alert("只能上传Excel文件");
            //     } else {
            //         var url = "/ajax_goods/goods_excel_import";
            //         var formData = new FormData($('#execl_form')[0]);
            //
            //         // var formData = new FormData();
            //         // formData.append("excel", document.getElementById("excel").files[0]);
            //
            //         $.ajax({
            //             url: url,
            //             type: "post",
            //             data: formData,
            //             success: function (result) {
            //                 if (result.code == 0) {
            //                     alert("批量导入成功:新增" + result.data + "条商品规格");
            //                     window.location.href = "/goods/list";
            //                 } else {
            //                     alert("更新失败:" + result.msg());
            //                 }
            //
            //                 // alert(JSON.stringify(result));
            //                 return false;
            //             },
            //             error: function () {
            //                 alert("excel上传失败");
            //             },
            //             cache: false,
            //             contentType: false,
            //             processData: false
            //         });
            //     }
            //
            //     return false;
            // })
        });
    </script>
    <!-- end sp-wrapper -->

    <script>
        layui.use(['laydate', 'layer'], function () {
            var layer = layui.layer;
            $('.updItem').click(function () {
                var specId = $(this).attr('specId');
                var specNum = $(this).attr('specNum');
                var attr1 = $(this).attr('attr1');
                var attr2 = $(this).attr('attr2');
                if(attr1 == '' || attr1 == undefined || attr1 == null || attr1.length <= 0){
                    attr1="";
                }
                if(attr2 == '' || attr2 == undefined || attr2 == null || attr2.length <= 0){
                    attr2="";
                }
                var html='<div><p style="display: inline;">衣长:</p><input name="price" id="price" style="width:200px;height:70px;border: 1px solid black;" value='+attr1+' /></div><div style="margin-top: 20px;"><p style="display: inline;">面料:</p><input name="num" id="num" style="width:200px;height:25px;border: 1px solid black;" value='+attr2+' /></div>';
                layer.open({
                    title: '修改 '+specNum,
                    area: ['300px', '240px'],
                    btnAlign: 'c',
                    closeBtn:'1',//右上角的关闭
                    content: html,
                    btn:['确认','取消'],
                    yes: function (index, layero) {
                        var attr1 = $('#price').val();
                        var attr2 = $('#num').val();
                        $.ajax({
                            url: "/ajax_goods/upd_erp_good_spec_attr",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({specId:specId,attr1:attr1,attr2:attr2}),
                            success: function (res) {
                                if (res.code == 0) {
                                    layer.close(index);
                                    location.reload();
                                }
                            },
                            complete: function(XMLHttpRequest){
                                if (XMLHttpRequest.getResponseHeader("REDIRECT")=="NO_ACCESS")alert("无权限访问");
                            },
                        });
                    },
                    no:function(index) {
                        layer.close(index);
                        return false;//点击按钮按钮不想让弹层关闭就返回false
                    },
                    close:function(index)
                    {
                        alert('您刚才点击了关闭按钮');
                        return false;//点击按钮按钮不想让弹层关闭就返回false
                    }
                });
            });
        });
    </script>

</div>
</body>
<html>
